<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./../../css/common.css">
    <script src="./../../js/tools.js"></script>
    <script src="./../../js/api_v1.js"></script>
    <script src="./../../js/cookie.js"></script>
</head>
<body>
    <div class="head-container">
        <div class="header">
            <section class="head-sec1">
                <div class="content">
                    <ul>
                        <li><a href="">我的顺电</a></li>
                        <span></span>
                        <li><a href="">家电医院</a></li>
                        <span></span>
                        <li><a href="">为您服务</a></li>
                        <span></span>
                        <li><a href="">更多精选</a></li>
                        <span></span>
                        <li><a href="">手机顺电</a></li>
                        <span></span>
                        <li><a href="">商家入驻</a></li>
                    </ul>
                </div>
            </section>
            <section class="head-sec2">
                <div class="content">
                    <div class="floatl">
                        <img src="./images/logo.png" alt="">
                    </div>
                    <div class="center">
                        <input type="text"><button>搜索</button>
                    </div>
                    <div class="floatr">
                        <section class="register"></section>
                        <section class="login45"></section>
                        <section class="shopcar"></section>
                    </div>
                </div>
            </section>
            <section class="head-sec3">
                <div class="content">
                    <p>所有商品分类<i><img src="" alt=""></i></p>
                    <ul>
                        <li><a href="">首页</a></li>
                        <li><a href="">Apple授权专营店</a></li>
                        <li><a href="">戴森专区</a></li>
                        <li><a href="">尚睿专区</a></li>
                        <li><a href="">新品</a></li>
                        <li><a href="">手机专区</a></li>
                        <li><a href="">每周特惠</a></li>
                        <li><a href="">样品出清</a></li>
                        <li><a href="">企业购</a></li>
                        <li><a href="">顺电APP</a></li>
                    </ul>
                </div>
            </section>
        </div>
    </div>
    <div class="body content">
        <section>
            <table>
                <thead>
                    <input type="checkbox" class="selAll">全选
                    <col span="1" >
                    <tr>
                        <th>序号</th>
                        <th>选中</th>
                        <th>商品名</th>
                        <th>商品价格</th>
                        <th>数量</th>
                        <th>小计</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                </tbody>
                
            </table>
            <button class="delAll">删除</button><span>总计：￥</span><span class="count"></span>
        </section>
    </div>
    <div class="footer-container">
        <div class="foot">
            <section class="foot-sec1">
                <div class="content">
                    <ul class="foot-nav">
                        <li><img src="./../../images/zp.png" alt=""><span>正品保证</span></li>
                        <li><img src="./../../images/vip_footer.png" alt=""><span>会员尊享</span></li>
                        <li><img src="./../../images/bao.png" alt=""><span>全国联保</span></li>
                        <li><img src="./../../images/30.png" alt=""><span>30天退货</span></li>
                        <li><img src="./../../images/Awesome-Projects.png" alt=""><span>正规发票</span></li>
                    </ul>
                </div>
            </section>
            <div class="content">
                <section class="foot-sec2">
                    <div>
                        <p>商城客服热线</p>
                        <section>
                            <div>
                                <i><img src="./../../images/time_footer.png" alt=""></i><span>商城服务时间: 09:8:00</span>
                            </div>
                            <div>
                                <i><img src="./../../images/mobile_footer.png" alt=""></i><span>400-8899-618</span>
                            </div>
                        </section>
                    </div>
                    <div>
                        <p>企业购热线</p>
                        <section>
                            <div>
                                <i><img src="./../../images/time_footer.png" alt=""></i><span>企业购热线时间: 09:8:00</span>
                            </div>
                            <div>
                                <i><img src="./../../images/mobile_footer.png" alt=""></i><span>0755-83286903</span>
                            </div>
                        </section>
                    </div>
                    <div>
                        <p>售后服务热线</p>
                        <section>
                            <div>
                                <i><img src="./../../images/time_footer.png" alt=""></i><span>售后热线时间: 09:00 - 22:00</span>
                            </div>
                            <div>
                                <i><img src="./../../images/mobile_footer.png" alt=""></i><span>400-6788-688</span>
                            </div>
                        </section>
                    </div>
                    <div>
                        <p>在线客服热线</p>
                        <section>
                            <div>
                                <i><img src="./../../images/time_footer.png" alt=""></i><span>服务时间: 09:00 - 23:00</span>
                            </div>
                            <div>
                                <i><img src="./../../images/kefu_footer.png" alt=""></i><span><a href="">在线客服</a><a href="">及时答疑</a></span>
                            </div>
                        </section>
                    </div>
                </section>
                <section class="foot-sec3">
                    <div class="foot-sec3-main">
                        <ul>
                            <p>新手指引</p>
                            <li><a href="">交易须知</a></li>
                            <li><a href="">开具发票</a></li>
                            <li><a href="">联系客服</a></li>
                            <li><a href="">会员登录小贴士</a></li>
                        </ul>
                        <ul>
                            <!-- <p></p> -->
                            <li><a href="">支付及配送</a></li>
                            <li><a href="">在线支付</a></li>
                            <li><a href="">汇款转账</a></li>
                            <li><a href="">运费政策</a></li>
                            <li><a href="">配送方式</a></li>
                        </ul>
                        <ul>
                            <!-- <p></p> -->
                            <li><a href="">订单及售后</a></li>
                            <li><a href="">订单说明</a></li>
                            <li><a href="">退款说明</a></li>
                            <li><a href="">售后政策</a></li>
                            <li><a href="">售后申请</a></li>
                        </ul>
                        <ul>
                            <!-- <p></p> -->
                            <li><a href="">关于顺电</a></li>
                            <li><a href="">品牌故事</a></li>
                            <li><a href="">投资者关系</a></li>
                            <li><a href="">联系方式</a></li>
                            <li><a href="">网站合作</a></li>
                        </ul>
                    </div>
                    <div class="foot-sec3-aside">
                        <p>门店体验店</p>
                        <p>深圳市顺电连锁股份有限公司，是一家专门销售家用电器(包括手机、电脑、数码相机)的零售商。顺电美宜佳门店有以下特点:高品质商品、丰富选择、专业服务。</p>
                        <div>
                            <ul>
                                <li><a href="">北京</a></li>
                                <li><a href="">上海</a></li>
                                <li><a href="">深圳</a></li>
                            </ul>
                            <ul>
                                <li><a href="">广州</a></li>
                                <li><a href="">苏州</a></li>
                                <li><a href="">更多</a></li>
                            </ul>
                        </div>
                    </div>
                </section>
                <section class="foot-sec4">
                    <div>
                        <section>
                            <p>
                                <span>粤ICP备13052236</span><i>|</i>营业执照
                            </p>
                            <p>Copyright 2002-2021.深圳市顺电脑连锁股份有限公司 版权所有</p>
                        </section>
                        <section>
                            <ul>
                                <li><a href=""><i><img src="./../../images/police.png" alt=""></i><span>网上报警</span></a></li>
                                <span></span>
                                <li><a href=""><i><img src="./../../images/gaju.png" alt=""></i><span>深圳市公安局</span></a></li>
                                <span></span>
                                <li><a href=""><i><img src="./../../images/gongshang.png" alt=""></i><span>工商监管</span></a></li>
                                <span></span>
                                <li class="weibo"><a href="javascript:;"><i><img src="./../../images/xinlangweibo.png" alt=""></i><span>关注微博</span></a></li>
                                <span></span>
                                <li class="weibo"><a href="javascript:;"><i><img src="./../../images/weixin_footer.png" alt=""></i><span>顺电购物</span></a></li>
                                <span></span>
                                <li><a href=""><i><img src="./../../images/audit_logo.png" alt=""></i><span>顺电举报网</span></a></li>
                            </ul>
                        </section>
                    </div>
                </section>
            </div>
        </div>
    </div>
    <script>
        let uid = getCookie("id");
        if( !uid ){
            window.location.href = "./../../login.html" ;
        }
        getAllGoods();
        async function getAllGoods(){
            let res = await getCarData({opt:'getList',uid});
            dataArr = res.map(item=>({...item,"flag":false,"is_delete":true}));
            sessionStorage.setItem("dataArr",JSON.stringify(dataArr));
            getDataList();
        }
        function getDataList(){
            let arr = JSON.parse(sessionStorage.getItem("dataArr")).filter(item=>item['is_delete']);
            let tbodyEle = document.querySelector("table tbody"); 
            let selAllEle = document.querySelector(".selAll");
            if( arr.length == 0 ){
                selAllEle.checked = false ; 
            }
            renderDom(tbodyEle,arr);
            getCount(arr);
            selAll(arr);
            delAll(arr);
        }
        async function del(id){
            let res = await getCarData({opt:'delData',id:id});
            if( res['status'] == 1 ){
                console.log("删除成功");
            }
        } 
        async function numChange(id,num){
            let res = await getCarData({opt:'optData',id:id,num});
            if( res['status'] == 1 ){
                console.log("修改成功!");
            }
        }
        function getCount(data){
            let countEle = document.querySelector(".count");
            let countPrice = 0 ; 
            data.filter(item=>item['is_delete']&&item['flag']).forEach(value=>{
                countPrice = parseInt(countPrice) + parseInt((value['price'] * value['pnum']).toFixed(2)) ; 
            });
            countEle.innerHTML = countPrice ; 
        }
        function renderDom(ele,data){
            ele.innerHTML  = '' ;
            data.forEach((item,key,data)=>{
                let trEle = document.createElement("tr");
                trEle.setAttribute("myid",item['id']);
                let str = '' ;
                if( item['flag'] ){
                    str = "checked='true'" ; 
                }
                trEle.innerHTML = `
                    <td>${key+1}</td>
                    <td><input type="checkbox" class="checkbox" ${str} ></td>
                    <td>${item['pname']}</td>
                    <td>￥${item['price']}</td>
                    <td><span class="reduce">-</span><input type="text" class="goodNum" value="${item['pnum']}"><span class="add">+</span></td>
                    <td>${(item['price'] * item['pnum']).toFixed(2)}</td>
                    <td class="del" >删除</td>` ;
                let delBtn = trEle.querySelector(".del");
                let inputEle = trEle.querySelector(".goodNum");
                trEle.onclick = function (event) {
                    let e = event || window.event ; 
                    let t = e.target || e.srcElement ;
                    if( t.className == 'checkbox' ){
                        data[key]['flag'] = t.checked ; 
                        let checkFlag = data.every((v,k)=>v['flag']); 
                        document.querySelector(".selAll").checked = checkFlag ; 
                        sessionStorage.setItem("dataArr",JSON.stringify(data));
                        getDataList();
                    } 
                    if( t.className == "reduce" ){
                        let pnum = parseInt(t.nextElementSibling.value);
                        if( pnum > 1 ){
                            t.nextElementSibling.value = pnum - 1  ;
                            data[key]['pnum'] = pnum - 1 ; 
                            sessionStorage.setItem("dataArr",JSON.stringify(data));
                            getDataList();
                            numChange(data[key]['id'],data[key]['pnum']);
                        } 
                    }
                    if( t.className == "add" ){
                        let pnum = parseInt(t.previousElementSibling.value);
                        t.previousElementSibling.value = pnum + 1  ;
                        data[key]['pnum'] =  pnum + 1 ; 
                        sessionStorage.setItem("dataArr",JSON.stringify(data));
                        getDataList();
                        numChange(data[key]['id'],data[key]['pnum']);
                    }
                    if( t.className == "del" ){
                        data[key]['is_delete'] = false ; 
                        sessionStorage.setItem("dataArr",JSON.stringify(data));
                        getDataList();
                        del(data[key]['id']);
                    }
                }
                ele.appendChild(trEle);
            });
        }
        function selAll(arr){
            let selAllEle = document.querySelector(".selAll");
            selAllEle.onclick = function (){
                if( arr.length == 0 ){
                    alert("请添加商品到购物车!");
                }
                arr.forEach(item=>{item['flag']=this.checked;});
                sessionStorage.setItem("dataArr",JSON.stringify(arr));
                getDataList();
            }
        }
        function delAll(arr){
            let delAllEle = document.querySelector(".delAll");
            delAllEle.onclick = function (){
                for( let i = 0 ; i < arr.length ; i ++ ){
                    if( arr[i]['flag'] ){
                        arr[i]['is_delete'] = false ; 
                        sessionStorage.setItem("dataArr",JSON.stringify(arr));
                        getDataList();
                        del(arr[i]['id']);
                    }
                }
            }
        }
    </script>
   
</body>
</html>